<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      layout:decorator="themes/default/layout/public">

<head>
    <link th:href="@{/static/js/summernote/summernote.css}" rel="stylesheet"/>
</head>
<div  layout:fragment="content">
    <div class="row mt-10">
        <ol class="breadcrumb">
            <li><a href="/articles">文章</a></li>
            <li class="active">撰写文章</li>
        </ol>
        <form th:object="${article}" id="article_form" method="POST" role="form" enctype="multipart/form-data" th:action="${#request.getRequestURI()}">
            <input type="hidden" id="tagNames" name="tagNames" value="" />

            <div class="form-group" th:classappend="${#fields.hasErrors('title')}?'has-error'">
                <label for="title">文章标题:</label>
                <input id="title" type="text" name="title"  class="form-control input-lg" placeholder="我想起那天下午在夕阳下的奔跑,那是我逝去的青春" th:value="${article.title}" />
                <p th:if="${#fields.hasErrors('title')}" class="help-block" th:text="${#fields.errors('title')}"> </p>
            </div>
            <div class="form-group" th:classappend="${#fields.hasErrors('logo')}?'has-error'">
                <label>文章封面</label>
                <input type="file" name="logoFile"/>
                <p th:if="${#fields.hasErrors('logo')}" class="help-block" th:text="${#fields.errors('logo')}"> </p>
                <p th:if="!${#fields.hasErrors('logo')}" class="help-block">建议尺寸200*120</p>
            </div>
            <div class="form-group" th:classappend="${#fields.hasErrors('content')}?'has-error'">
                <label for="article_editor">文章正文：</label>
                <div id="article_editor" th:utext="${article.content}"></div>
                <p th:if="${#fields.hasErrors('content')}" class="help-block" th:text="${#fields.errors('content')}"> </p>
            </div>

            <div class="form-group">
                <label>文章导读：</label>
                <textarea name="summary" class="form-control" placeholder="文章摘要" th:text="${article.summary}"></textarea>
            </div>

            <div class="row">
                <div class="col-xs-4">
                    <div th:class="${#fields.hasErrors('category')}?'form-group has-error':'form-group'">
                        <select name="categoryId" id="categoryId" class="form-control">
                            <option value="0">请选择分类</option>
                            <option th:each="category:${categorys}" th:value="${category.id}" th:text="${category.name}"></option>
                        </select>
                        <p class="help-block" th:if="${#fields.hasErrors('category')}" th:text="${#fields.errors('category')}"></p>
                    </div>
                </div>
                <div class="col-xs-8">
                    <select id="select_tags" name="select_tags" class="form-control" multiple="multiple" >
                        <!--<option th:each="article:${article.tags}" th:value="${tag.name}"  selected th:text="${tag.name}"></option>-->
                    </select>
                </div>
            </div>

            <div class="row mt-20">
                <div class="col-xs-12 col-md-11">
                    <ul class="list-inline">
                        <li class="pull-right" th:if="${GlobalSetting.irrigation.codeCreateArticle}">
                            <div class="form-group" th:classappend="${validateCodeError}?'has-error'">
                                <input type="text" class="form-control" name="captcha" required="" placeholder="验证码" />
                                <span th:if="${validateCodeError}" class="help-block" th:text="${validateCodeError}"></span>
                                <div class="mt-10"><a href="javascript:void(0);" id="reloadCaptcha"><img src="/code/image?width=60&height=20"></a></div>
                            </div>
                        </li>
                    </ul>
                </div>

                <div class="col-xs-12 col-md-1">
                    <input type="hidden" id="article_editor_content"  name="content" th:value="${article.content}"  />
                    <button type="submit" class="btn btn-primary pull-right editor-submit">发布文章</button>
                </div>
            </div>
        </form>

    </div>
    <script th:src="@{/static/js/jquery.min.js}"></script>
    <script th:src="@{/static/css/bootstrap/js/bootstrap.min.js}"></script>
    <script th:src="@{/js/global.js?v=20170412}"></script>
    <link th:href="@{/static/js/select2/css/select2.min.css}" rel="stylesheet"/>
    <link th:href="@{/static/js/select2/css/select2-bootstrap.min.css}" rel="stylesheet"/>
    <script th:src="@{/static/js/summernote/summernote.min.js}"></script>
    <script th:src="@{/static/js/summernote/lang/summernote-zh-CN.min.js}"></script>
    <script th:src="@{/static/js/select2/js/select2.min.js}"></script>
    <script th:src="@{/static/js/select2/js/i18n/zh-CN.js}"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#article_editor').summernote({
                lang: 'zh-CN',
                height: 350,
                placeholder:'撰写文章',
                toolbar: [ ['common', ['style','bold','color','ol', 'paragraph','table','link','picture','clear','fullscreen']] ],
                callbacks: {
                    onChange:function (contents, $editable) {
                        var code = $(this).summernote("code");
                        $("#article_editor_content").val(code);
                    },
                    onImageUpload: function(files) {
                        upload_editor_image(files[0],'article_editor');
                    }
                }
            });

        });
    </script>
</div>